<template>
  <div>
    <a-form
      :model="userForm"
      :auto-label-width="true"
      layout="vertical"
      size="medium"
      @submit-success="submit"
    >
      <a-form-item
        :rules="{ required: true, message: t['校验失败'] }"
        field="nickName"
        :label="t['昵称']"
      >
        <a-input v-model="userForm.nickName" />
      </a-form-item>
      <a-form-item
        :rules="{ required: true, message: t['校验失败'] }"
        field="userName"
        :label="t['用户名']"
      >
        <a-input v-model="userForm.userName" />
      </a-form-item>
      <a-form-item :rules="{ message: t['校验失败'] }" field="telephone" :label="t['手机号']">
        <a-input v-model="userForm.telephone" />
      </a-form-item>
      <a-form-item :rules="{ message: t['校验失败'] }" field="password" :label="t['密码']">
        <a-input-password v-model="userForm.password" />
      </a-form-item>

      <a-form-item field="roleIds" :label="t['角色']">
        <a-select
          v-model="userData.roleIds"
          multiple
          :options="userData.roles"
          :field-names="{ label: 'roleName', value: 'roleId', disabled: 'disable' }"
        ></a-select>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit">{{ t["保存"] }}</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { addUser, updateUser } from "@/api/service/user/user";

import { fetchListUser } from "../data/curd";
import { resetForm, showForm, userData, userForm } from "../data/form";

const t = translate("公共模块");
const loading = ref(false);

const submit = async () => {
  loading.value = true;
  userForm.value.roleIds = userData.value.roleIds;
  if (userForm.value.userId) {
    await updateUser(userForm.value);
  } else {
    await addUser(userForm.value);
  }
  resetForm();
  loading.value = false;
  await fetchListUser();
  showForm.value = false;
};
</script>

<style lang="scss" scoped></style>
